<template>
  <div id="detail">
      <deta-nav-bar class="detail-nav"/>

      <scroll class="content" ref="scroll">
      <detail-swiper :top-images="topImage"/>
      <detail-base-info :goods="goods"/>
      <detail-shop-info :shop="shop"/>
      <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"/>
     <detail-param-info :param-info="paramInfo"/>
      <detail-comment-info :comment-info="commentInfo"/>
      <!-- <goods-list :goods="recommends"/> -->
      </scroll>


       <back-top @click.native="backClick" v-show="isShowBackTop"/>
      <detail-bottom-bar @addcart="addToCart"/>
    
  </div>
</template>

<script>
import DetaNavBar from './childComps/DetaNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
// import GoodsList from 'components/content/goods/GoodsList'
import DetailBottomBar from './childComps/DetailBottomBar.vue'
import BackTop from 'components/content/backTop/BackTop'



import Scroll from 'components/common/scroll/Scroll'


import {getDetail,Goods,Shop,GoodsParam,getRecommend } from 'network/detail'







export default {
  components: {  
    DetaNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    Scroll,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    DetailBottomBar,
    // GoodsList,
    BackTop,
    
  
  },
    name:'Detail',
    data(){
        return {
            iid:null,
            topImage:[],
            goods:{},
            shop:{},
            detailInfo:{},
            paramInfo:{},
            commentInfo:{},
            recommends:[],
            isShowBackTop:false,
        }
    },
    created(){

    //1.保存传入的iid
     this.iid = this.$route.params.iid
     //2.根据iid请求详情数据
     getDetail(this.iid).then(res => {
        //  console.log(res);
        //1.获取顶部的图片轮播数据
        const data = res.result
        this.topImage = data.itemInfo.topImages
        //2.获取商品信息
        this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
       //3.创建店铺信息的对象
       this.shop = new Shop(data.shopInfo)
       //4.保存商品的详情数据
       this.detailInfo = data.detailInfo
       //5.获取参数信息
       this.paramInfo = new GoodsParam (data.itemParams.info,data.itemParams.rule)

       //6.取出评论信息
       if(data.rate.list){
         this.commentInfo = data.rate.list[0]
       }
    })
    //3.请求推荐数据
    getRecommend().then(res => {
      // console.log(res);
      this.recommends = res.data.list
    })
    },
    methods:{
      imageLoad(){
        this.$refs.scroll.refresh()
      },
        backClick(){
        this.$refs.scroll.scrollTo(0,0)
      },
       contentscroll(position){
        //1.判断backTop是否显示
       this.isShowBackTop =  (-position.y) > 1000
       //决定tabControl是否吸顶(position:fixed)
       this.isTabFixed = (-position.y) > this.tabOffsetTop
      },
      addToCart(){
        // console.log('-----');
        const product = {}
        product.iid = this.iid
        product.image = this.topImages[0]
        product.title = this.goods.title
        product.desc = this.goods.desc
        product.price = this.goods.realPrice

        //添加商品到购物车里
        // this.$store.cartList.push(product)
        this.$store.commit('addcart',product)
      }
    }
}
</script>

<style scoped>
#detail {
  position: relative;
  z-index: 9;
  background:#fff;
  height: 100vh;
}
.detail-nav {
  position: fixed;
  width: 100%;
  z-index: 9;
  background-color: #fff;
}
.content {
  height: calc(100% - 44px - 49px);
}
</style>